<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="./template/VisitorTemplate.xhtml">
    <ui:define name="begin">
        <f:view beforePhase="#{customerULPManagerBean.initVisitorMakeOrder}"></f:view>
    </ui:define>

    <ui:define name="contentInsert">  
        <style>
            .alignTop1 {
                width:100px;
                vertical-align:top;
            }
            .alignTop2 {
                width:200px;
                vertical-align:top;
            }
        </style>

        <h:body>
            <h:form id="formMain">
                <f:view>
                <p:growl id="messages" />
                <br/>
                <br/>
                <p:fieldset style="position:relative; width:850px">
                    <h2>#{customerULPManagerBean.selectedULPItem.name}</h2>
                    <h:panelGrid columns="2" cellpadding="5" frame="above" style="text-align:center">
                        <h:panelGrid border="1" columns="1" cellpadding="5" style="top:10px; width:300px">
                            <p:commandLink title="Redeem now" onclick="confirmation.show()">
                                <p:graphicImage value="/images/buttons/redeemnow.gif" /> 
                            </p:commandLink>

                            <h:outputText value="ONLY #{customerULPManagerBean.selectedULPItem.pointsToRedeem} POINTS TO REDEEM" 
                                          style="font-weight:bold; text-align:center; font-size:18px"/>

                            <h:panelGrid border="1" columns="2" cellpadding="5" style="top:10px; width:300px">
                                <h:outputText value="Indicate quantity: " 
                                              style="font-weight:bold; text-align:center; font-size:12px"/>
                                <h:selectOneMenu value="#{customerULPManagerBean.quantity}" id="quantity" >
                                    <f:selectItem itemLabel="1" itemValue="1"></f:selectItem>
                                    <f:selectItem itemLabel="2" itemValue="2"></f:selectItem>
                                    <f:selectItem itemLabel="3" itemValue="3"></f:selectItem>
                                    <f:selectItem itemLabel="4" itemValue="4"></f:selectItem>
                                    <f:selectItem itemLabel="5" itemValue="5"></f:selectItem>
                                    <f:selectItem itemLabel="6" itemValue="6"></f:selectItem>
                                    <f:selectItem itemLabel="7" itemValue="7"></f:selectItem>
                                    <f:selectItem itemLabel="8" itemValue="8"></f:selectItem>
                                    <f:selectItem itemLabel="9" itemValue="9"></f:selectItem>
                                    <f:selectItem itemLabel="10" itemValue="10"></f:selectItem>
                                    <p:ajax update="totalPoint" listener="#{customerULPManagerBean.calculateTotalPoint}" /> 
                                </h:selectOneMenu>
                                <h:outputText value="Number of points needed: " style="font-weight:bold; text-align:center; font-size:12px"/>
                                <h:outputText id="totalPoint" value="#{customerULPManagerBean.totalPoint}"/>
                                <h:outputText value="Currently you have: " style="font-weight:bold; text-align:center; font-size:12px"/>
                                <h:outputText value="#{customerULPManagerBean.customer.point} points"/>
                            </h:panelGrid>
                            

                        </h:panelGrid>

                        <h:panelGrid columns="1" cellpadding="10" style="text-align:left">
                            <p:graphicImage value="/images/ULPItems/#{customerULPManagerBean.selectedULPItem.imageURL}" width="450" height="300"/>
                            <h:panelGrid border="0" columns="2" cellpadding="5" columnClasses="alignTop1; alignTop2" style="; text-align:left">              
                                <h:outputText value="Highlights" style="font-weight:bold; font-size:14px"/>
                                <h:outputText value="Fine Print" style="font-weight:bold; font-size:14px"/>
                                <h:outputText value="#{customerULPManagerBean.selectedULPItem.highlight}" escape="false" />                
                                <h:outputText value="#{customerULPManagerBean.selectedULPItem.fineprint}" escape="false" />
                            </h:panelGrid>

                        </h:panelGrid>  
                    </h:panelGrid>
                </p:fieldset>
                <br/>
                <br/>
                <p:fieldset legend="Additional Information" toggleable="true" toggleSpeed="500"
                            onToggleUpdate="growl" style="width:850px">
                    <h:panelGrid columns="1" cellpadding="10">
                        <h:outputText value="#{customerULPManagerBean.selectedULPItem.name}" style="font-weight:bold; text-align:center; font-size:14px"/>
                        <h:outputText value="#{customerULPManagerBean.selectedULPItem.description}" escape="false"/>
                    </h:panelGrid>
                </p:fieldset>

                <p:confirmDialog message="Do you want to redeem this item ?"
                                 showEffect="bounce" hideEffect="explode"
                                 header="Confirm on redemption" severity="alert" widgetVar="confirmation">

                    <p:commandButton value="Yes Sure" update="messages" oncomplete="confirmation.hide()"
                                     actionListener="#{customerULPManagerBean.redeemULPItem}" />
                    <p:commandButton value="Not Yet" onclick="confirmation.hide()" type="button" /> 
                </p:confirmDialog>
                </f:view>
            </h:form>
        </h:body>
    </ui:define>
</ui:composition>